<template>
  <div class="between">
    <el-tabs class="Tabs" v-model="tabsValue">
      <el-tab-pane label="基础设置" name="1"></el-tab-pane>
      <el-tab-pane label="监听器" name="2"></el-tab-pane>
    </el-tabs>
    <el-form ref="form" class="betweenForm" :model="form" label-width="120px" :rules="rules" size="small"
             :disabled="disabled">
      <template v-if="tabsValue === '1'">
        <slot name="form-item-task-nodeCode" :model="form" field="nodeCode">
          <el-form-item label="节点编码">
            <el-input v-model="form.nodeCode" :disabled="disabled"></el-input>
          </el-form-item>
        </slot>
        <slot name="form-item-task-nodeName" :model="form" field="nodeName">
          <el-form-item label="节点名称">
            <el-input v-model="form.nodeName" :disabled="disabled"></el-input>
          </el-form-item>
        </slot>
        <slot name="form-item-task-collaborativeWay" :model="form" field="collaborativeWay">
          <el-form-item label="协作方式">
            <el-radio-group v-model="form.collaborativeWay">
              <el-radio label="1" v-if="form.collaborativeWay ==='1'">
                <span class="flex-hc">
                  或签
                  <el-tooltip content="只需一个人审批" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </span>
              </el-radio>
              <el-radio label="2" v-if="form.collaborativeWay ==='2'">
                <span class="flex-hc">
                  票签
                  <el-tooltip content="部分办理人审批，只支持选择用户" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </span>
              </el-radio>
              <el-radio label="3" v-if="form.collaborativeWay ==='3'">
                <span class="flex-hc">
                  会签
                  <el-tooltip content="所有办理都需要审批，只支持选择用户" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </span>
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </slot>
        <slot name="form-item-task-nodeRatio" :model="form" field="nodeRatio" v-if="form.collaborativeWay === '2'">
          <el-form-item label="票签占比" prop="nodeRatio">
            <el-input v-model="form.nodeRatio" type="number" placeholder="请输入"></el-input>
            <div class="placeholder">票签比例范围：(0-100)的值</div>
          </el-form-item>
        </slot>
        <slot name="form-item-task-permissionFlag" :model="form" field="permissionFlag">
          <el-form-item label="办理人输入" class="permissionItem">
            <div v-for="(tag, index) in form.permissionFlag" :key="index" class="inputGroup">
              <el-input v-model="form.permissionFlag[index]" style="width: 200px;"></el-input>
              <i class="Icon el-icon-circle-close" v-if="form.permissionFlag.length !== 1 && !disabled" @click="delPermission(index)"/>
              <i class="Icon el-icon-circle-plus-outline"  v-if="(index === form.permissionFlag.length - 1) && !disabled" @click="addPermission"/>
              <el-button class="btn" v-if="(index === form.permissionFlag.length - 1) && !disabled" @click="initUser">
                选择
              </el-button>
            </div>
          </el-form-item>
        </slot>
        <slot name="form-item-task-skipAnyNode" :model="form" field="skipAnyNode">
          <el-form-item label="跳转任意节点">
            <el-radio-group v-model="form.skipAnyNode">
              <el-radio label="N">否</el-radio>
              <el-radio label="Y">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </slot>
        <slot name="form-item-task-formCustom" :model="form" field="formCustom">
          <el-form-item label="审批表单设置">
            <el-select v-model="form.formCustom">
              <el-option label="使用流程表单" :value="''"></el-option>
              <!-- <el-option label="节点自定义表单" value="Y"></el-option> -->
              <el-option label="节点表单路径" value="N"></el-option>
            </el-select>
          </el-form-item>
        </slot>
        <slot name="form-item-task-formPath" :model="form" field="formPath" v-if="form.formCustom === 'N'">
          <el-form-item label="审批表单路径">
            <el-input v-model="form.formPath"></el-input>
          </el-form-item>
        </slot>
      </template>
      <template v-if="tabsValue === '2'">
        <slot name="form-item-task-listenerType" :model="form" field="listenerType">
          <el-form-item prop="listenerRows" class="listenerItem">
            <el-table :data="form.listenerRows" style="width: 100%">
              <el-table-column prop="listenerType" label="类型" width="90">
                <template slot-scope="scope">
                  <el-form-item :prop="'listenerRows.' + scope.$index + '.listenerType'" :rules="rules.listenerType">
                    <el-select v-model="scope.row.listenerType" placeholder="请选择">
                      <el-option label="开始" value="start"></el-option>
                      <el-option label="分派" value="assignment"></el-option>
                      <el-option label="完成" value="finish"></el-option>
                      <el-option label="创建" value="create"></el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="listenerPath" label="路径">
                <template slot-scope="scope">
                  <el-form-item :prop="'listenerRows.' + scope.$index + '.listenerPath'" :rules="rules.listenerPath">
                    <el-input v-model="scope.row.listenerPath" placeholder="请输入"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="55" v-if="!disabled">
                <template slot-scope="scope">
                  <el-button type="danger" icon="el-icon-delete" @click="handleDeleteRow(scope.$index)"/>
                </template>
              </el-table-column>
            </el-table>
            <el-button v-if="!disabled" type="primary" style="margin-top: 10px;" @click="handleAddRow">增加行</el-button>
          </el-form-item>
        </slot>
      </template>
    </el-form>

    <!-- 权限标识：会签票签选择用户 -->
    <el-dialog title="办理人选择" :visible.sync="userVisible" width="80%" append-to-body>
      <selectUser :selectUser.sync="form.permissionFlag" :userVisible.sync="userVisible"
                  @handleUserSelect="handleUserSelect"></selectUser>
    </el-dialog>
  </div>
</template>

<script>
import {listRole} from "@/api/system/role";
import {listUser} from "@/api/system/user";
import {listDept} from "@/api/system/dept";
import selectUser from "@/components/SelectUser";

export default {
  name: "Between",
  components: {
    selectUser
  },
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    },
    disabled: { // 是否禁止
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      tabsValue: '1',
      form: this.value,
      groupOptions: [],
      rules: {
        nodeRatio: [
          {required: false, message: "请输入", trigger: "change"},
          {
            pattern: /^(?:[1-9]\d?|0\.\d{1,3}|[1-9]\d?\.\d{1,3})$/,
            message: "请输入(0, 100)的值，最多保留三位小数",
            trigger: ["change", "blur"]
          }
        ],
        listenerType: [{required: true, message: '监听器类型不能为空', trigger: 'change'}],
        listenerPath: [{required: true, message: '监听器路径不能为空', trigger: 'blur'}]
      },
      userVisible: false
    }
  },
  watch: {
    form: {
      handler(n) {
        this.$emit('change', n)
      },
      deep: true
    }
  },
  created() {
    if (this.form.permissionFlag) {
      this.form.permissionFlag = this.form.permissionFlag.split(",")
    } else {
      this.form.permissionFlag = [""]
    }
    if (this.form.listenerType) {
      const listenerTypes = this.form.listenerType.split(",");
      const listenerPaths = this.form.listenerPath.split("@@");
      this.form.listenerRows = listenerTypes.map((type, index) => ({
        listenerType: type,
        listenerPath: listenerPaths[index]
      }));
    }
    this.getPermissionFlag();
  },
  methods: {
    /** 选择角色权限范围触发 */
    getPermissionFlag() {
      let groupOptionCreateBy = {
        label: '创建人',
        options: [{
          value: 'warmFlowInitiator',
          label: '流程发起人'
        }]
      }
      this.groupOptions.push(groupOptionCreateBy);
      listRole().then(response => {
        let groupOption = {
          label: '角色',
          options: response.data.map(item => {
              return {
                value: 'role:' + item.id,
                label: item.name
              }
            }
          )
        }
        this.groupOptions.push(groupOption);
        listUser().then(response => {
          let groupOption = {
            label: '用户',
            options: response.data.map(item => {
                return {
                  value: item.id,
                  label: item.nickName
                }
              }
            )
          }
          this.groupOptions.push(groupOption);
          listDept().then(response => {
            let groupOption = {
              label: '部门',
              options: response.data.map(item => {
                  return {
                    value: 'dept:' + item.deptId,
                    label: item.name
                  }
                }
              )
            }
            this.groupOptions.push(groupOption);
          });
        });
      });
    },
    collaborativeWayChange(val) {
      this.form.permissionFlag = [];
      this.$set(this.form, "nodeRatio", val === "1" ? "0.000" : val === "3" ? "100.000" : "");
    },
    // 删除办理人
    delPermission(index) {
      this.form.permissionFlag.splice(index, 1);
    },
    // 添加办理人
    addPermission() {
      this.form.permissionFlag.push("");
    },
    // 打开用户选择弹窗
    initUser() {
      this.userVisible = true;
    },
    // 获取选中用户数据
    handleUserSelect(checkedItemList) {
      this.form.permissionFlag = checkedItemList.map(e => {
        return e.userId;
      });
    },
    // 增加行
    handleAddRow() {
      console.log(this.form)
      this.form.listenerRows.push({listenerType: '', listenerPath: ''});
    },
    // 删除行
    handleDeleteRow(index) {
      this.form.listenerRows.splice(index, 1);
    }
  }
}
</script>

<style scoped lang="scss">
.dialogSelect {
  display: none;
}

.placeholder {
  color: #828f9e;
  font-size: 12px;
}

::v-deep .listenerItem {
  display: inline-block;
  width: 100%;

  .el-form-item__label {
    float: none;
    display: inline-block;
    text-align: left;
  }

  .el-form-item__content {
    margin-left: 0 !important;
  }
}

::v-deep .Tabs {
  border: 0;
  margin: 0 20px;

  .el-tabs__content {
    display: none;
  }

  .el-tabs__item.is-active {
    margin-left: 0;
    border-top: 1px solid var(--el-border-color);
    margin-top: 0;
  }
}

.betweenForm {
  border: 1px solid #e4e7ed;
  border-top: 0;
  padding: 15px;
}

::v-deep .permissionItem {
  .el-form-item__content {
    display: block;
  }

  .inputGroup {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .el-input {
      width: 120px;
    }

    .Icon {
      width: 14px;
      height: 14px;
      margin-left: 5px;
      cursor: pointer;
      color: #fff;
      background: #94979d;
      border-radius: 50%;
      padding: 2px;

      &:hover {
        background: #f0f2f5;
        color: #94979d;
      }
    }

    .btn {
      height: 18px;
      margin-left: 5px;
      color: #fff;
      background: #94979d;
      border-radius: 5px;
      padding: 6px;
      font-size: 10px;
      border: 0;

      &:hover {
        background: #f0f2f5;
        color: #94979d;
      }
    }
  }
}
</style>

